<template>
 <h2>学生详情</h2>
    <p>学号：{{ route.query.num }}</p>        
    <!-- //query方式 -->
    <p>地址：{{ route.query.address }}</p>
    <p>分数：{{ route.query.score }}</p>
    <p>爱好：{{ route.query.hobby }}</p>
    <!-- <p>学号：{{ route.params.num }}</p>      params方式
    <p>地址：{{ route.params.address }}</p>
    <p>分数：{{ route.params.score }}</p>
    <p>爱好：{{ route.params.hobby }}</p> -->
</template>

<script setup lang="js">
import { useRoute } from 'vue-router';
import { ref, toRef, toRefs } from 'vue';

const route = useRoute()
console.log(route)
//响应式数据被解构赋值时 属性不会是响应式数据
// 解决方法 import { toRef,toRefs }     
// let {query} = toRefs(route)   批量传递
// let query = toRef(route, 'query') 单个传递 前面是来源 后面是属性名
//类比java 值传递 和 引用传递 （在方法中调用的数据被修改会影响原有值)
</script>

<style lang="css">
 td {
  border: 1px solid #000000;
 }

</style>